import Vue from 'vue'
import Vuex from 'vuex'
import { loginApi } from '@/api'

Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    token: localStorage.getItem('token') || '',
    refresh_token: localStorage.getItem('refresh_token') || ''
  },
  mutations: {
    setToken (state, token) {
      state.token = token
      // 将token存储到本地
      localStorage.setItem('token', token)
      // 本地存储包括 localStorage sessionStorage Cookie indexedDB
      // 他们共同点都是用来在浏览器中存储数据，都存到硬盘，vuex存储到内存，所以vuex刷新就会消失
      // 他们都只能存放字符串，如果想要存放对象 通过JSON.stringify进行装欢
      // localStorage 浏览器关闭也不会清空数据 跨页面也可以使用数据   5M
      // sessionStorage 临时会话存储 浏览器页面关闭就会清空数据 如果同一个网站开多个标签页 可以跨标签页面访问   5M
      // Cookie  浏览器存储的一种 cookie大小只有 4k 左右（不同浏览器大小不一样）
      // Cookie 会随着请求一起发送到后端 里面通常存放用户信息和用户配置 用户token
    },
    setRefreshToken (state, RefreshToken) {
      state.refresh_token = RefreshToken
      localStorage.setItem('refresh_token', RefreshToken)
    }
  },
  actions: {
    // 为什么使用vuex实现登录功能
    // 正常的企业开发场景会将登录 获取用户信息登功能放在vuex的actions中进行调用
    // token多处使用，是一个公共的状态 vuex更适合公共状态管理
    // 由于vuex不能实现刷新保存，所以还需要将token数据存放在本地一份，localSorage,cookie indexedDB

    // vuex实现登陆并保存token的步明
    //, 1、在vuex中的state里定义变量
    // /2.在nutations中定义修改state数据的方法
    // 3.需要在vuex中引入接口（登陆接口）
    // 4.在act1ons中实现接口的调用同时调用vue义中的mutat1os中的方法实现将
    // 接回的返回值存放在vuex的state中
    // 5.在需要调用登陆接回的文件中通过mapActions或者this.$store,dispatch("asyncLoginAction','传入的接回所需参数')

    async asyncLoginAction (store, val) {
      try {
        const res = await loginApi(val)
        const { refresh_token, token } = res.data.data
        store.commit('setToken', token)
        store.commit('setRefreshToken', refresh_token)
        return Promise.resolve(res)
      } catch (error) {
        return Promise.reject(error)
      }
    }
  },
  modules: {}
})
